aside {
    display: none;
}

@media (min-width: 541px) {
    aside {
        display: block;
        margin: 0 -30px 0 0;
        padding-top: 30px;
        width: 250px;
        min-width: 250px;
        z-index: 1;
    }

    aside:not(.preload){
      transition: all 0.3s ease-out;
    }

    aside hr {
        margin: 6px 15px;
    }

    aside i  {
        color: #000;
        width: 30px;
        min-width: 30px;
        text-align: center;
        margin: 0 0 0 15px;
    }

    aside i:not(.preload){
      transition: margin 0.3s ease-out;
    }

    aside li {
        list-style: none;
    }
        
    aside li .nav-row {
        padding: 6px 0;
        width: 100%;
        display: flex;
    }

    aside li.heading {
        font-weight: bold;
        font-variant: all-small-caps;
        font-size: 20px;
    }    

    aside .icon-title {
        margin-right: 15px;
    }

    aside .notification-badge {
        margin: 0 6px;
    }

    aside a {
        text-decoration: none;
    }
        
    aside a .icon-title {
        color: #006398;
    }
    
    aside a .icon-title:hover {
        color: #002334;
    }
    
    aside a .icon-title:active {
        color: #790000;
    }

    aside li .selected {
        background-color: #d9e1e2;
    }

    aside a.selected .icon-title {
        color: #000;
        font-weight: bold;
    }

    aside.collapsed {
        width: 60px;
        min-width: 60px;
    }
        
    aside.collapsed i {
        padding: 2px 0px;
        margin: 0 15px;
    }

    aside.collapsed .icon-title {
        width: 0px;
        overflow: hidden;
        min-width: 0px;
        white-space: nowrap;
    }
    
    /* put it on top of the icon */
    aside.collapsed .notification-badge {
        font-size: 12px;
        position: absolute;
        margin: 12px 0 0 32px;
    }
}